<template>
	<u-upload 
		ref="upload"
		:action="action"
		:max-size="5 * 1024 * 1024"
		 max-count="1"
		:before-upload="beforeUpload"
		:custom-btn="true"
		:show-progress="false"
		:multiple="false"
		:deletable="false"
		:show-upload-list="true"
		:form-data="formData"
		@on-success="onSuccess"
		width="0"
		height="0"
		 >
		<u-avatar slot="addBtn" :src="vuex_user.avatar_url" size="140"></u-avatar>
		</u-upload>
</template>

<script>
	// 在小程序中  this可能会丢失 
	let _this = {}
	export default {
		name:"oss-upload",
		data() {
			return {
				// 演示地址，请勿直接使用
				action: '',
				formData: {},
				upFileName: ''
			};
		},
		created() {
			_this = this
		},
		methods:{
			// 上传前的钩子
			async beforeUpload(index, list) {
				const {file} = list[0]
				// 条件编译
				//  #ifdef H5
				const fileName = file.name
				//  #endif
				
				//  #ifndef H5
				const fileName = file.path
				//  #endif
				
				// console.log(fileName)
				// 请求API  获取oss 的 token
				const ossTokenRes = await _this.$u.api.authOssToken()
				// console.log(ossTokenRes)
				
				// 设置上传域名
				_this.action = ossTokenRes.host
				
				// 处理唯一的文件名
				const suffix = fileName.slice(fileName.lastIndexOf('.'))
				// console.log(suffix)
				const upFileName = _this.$u.guid(20) + suffix
				// console.log(upFileName)
				_this.upFileName = upFileName
				// 额外的上传参数
				_this.formData = {
					// 文件名
					'key': upFileName,
					// 策略
					'policy': ossTokenRes.policy,
					'OSSAccessKeyId': ossTokenRes.accessid,
					// 签名
					'success_action_status': '200',
					'signature': ossTokenRes.signature
				}
				return true;
			},
			/* 
				上传成功之后
			 */
			async onSuccess(){
				// 移除预览区域的图片
				this.$refs.upload.remove(0)
				const params = {
					avatar: this.upFileName
				}
				// 请求API更新头像  
				await this.$u.api.userAvatarUpdate(params)
				// 更新缓存的用户信息
				this.$u.utils.updateUser()
				this.$u.toast('更新成功')
			}
		}
	}
</script>

<style>

</style>
